<template>
  <div class="app-container">
    <div v-if="user">
      <el-row :gutter="20">

        <el-col :span="6" :xs="24">
          <user-card :user="user" />
        </el-col>

        <el-col :span="18" :xs="24">
          <el-card>
            <el-tabs v-model="activeTab">
              <el-tab-pane :label="$t('profile.avatar')" name="Avatar">
                <div class="components-container">
                  <aside> {{ $t('profile.changeTip') }}
                  </aside>
                  <pan-thumb :image="image" />
                  <el-button
                    type="primary"
                    icon="el-icon-upload"
                    style="position: absolute;bottom: 15px;margin-left: 40px;"
                    @click="imagecropperShow=true"
                  >
                    {{ $t('profile.changeAvatar') }}
                  </el-button>
                  <image-cropper
                    v-show="imagecropperShow"
                    :key="imagecropperKey"
                    :width="300"
                    :height="300"
                    url="http://localhost:9000/hrm/user/updateAvatar"
                    :lang-type="this.$store.getters.language"
                    @close="close"
                    @crop-upload-success="cropSuccess"
                  />
                </div>
              </el-tab-pane>
              <el-tab-pane :label="$t('profile.timeline')" name="timeline">
                <timeline :timeline="timeline" />
              </el-tab-pane>
              <el-tab-pane :label="$t('profile.profile')" name="profile">
                <profile :user="user" />
              </el-tab-pane>
              <el-tab-pane :label="$t('profile.accountSecurity')" name="accountSecurity">
                <account :user="user" />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import UserCard from './components/UserCard'
import Timeline from './components/Timeline'
import Account from './components/Account'
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
import Profile from './components/Profile'
import { getInfo, getUserProfile } from '@/api/user'

export default {
  components: { UserCard, Timeline, Account, ImageCropper, PanThumb, Profile },
  data() {
    return {
      user: {
        id: 0,
        name: '',
        role: '',
        post: '',
        email: '',
        avatar: '',
        phone: '',
        world: '',
        address: '',
        hireTime: '',
        quitTime: ''
      },
      activeTab: 'Avatar',
      imagecropperShow: false,
      imagecropperKey: 0,
      image: '',
      imageLang: this.$store.getters.language,
      timeline: [{
        timestamp: '',
        title: '',
        content: ''
      }]
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  },
  watch: {
  },
  created() {
    this.getUser()
  },
  methods: {
    cropSuccess(resData) {
      this.$parent.$message({
        message: '头像修改成功！',
        type: 'success',
        duration: 3000
      })
      this.imagecropperShow = false
      this.imagecropperKey = this.imagecropperKey + 1
      this.image = resData
      this.user.avatar = resData
      getInfo(this.$store.getters.token)
    },
    close() {
      this.imagecropperShow = false
    },
    getRoleName(data) {
      if (data === 'sys_admin') {
        return '系统管理员'
      }
      if (data === 'com_admin') {
        return '公司管理员'
      }
      if (data === 'dep_admin') {
        return '部门管理员'
      }
      if (data === 'user') {
        return '普通用户'
      }
    },
    getUser() {
      getUserProfile(this.$store.getters.id).then(response => {
        const data = response.data
        console.log(data)
        this.user = data
        this.user.role = this.getRoleName(data.role)
        this.image = data.avatar
        const tempTime = new Array(1)
        const hireLine = { timestamp: '', title: '', content: '' }
        hireLine.timestamp = this.timestampToTimeStr(this.user.hireTime)
        hireLine.title = 'Join us'
        hireLine.content = this.user.name + ' joined us at ' + hireLine.timestamp
        tempTime[0] = hireLine
        if (this.user.quitTime !== null) {
          const date = new Date(this.user.quitTime)
          if (date <= new Date()) {
            const quitLine = { timestamp: '', title: '', content: '' }
            quitLine.timestamp = this.timestampToTimeStr(this.user.quitTime)
            quitLine.title = 'Leave us'
            quitLine.content = this.user.name + ' leave us at ' + quitLine.timestamp
            tempTime[1] = quitLine
          }
        }
        this.timeline = tempTime
        console.log(tempTime)
      })
    },
    timestampToTimeStr(timestamp) {
      // 时间戳为10位需乘1000，时间戳为13位的话不需乘1000
      const date = new Date(timestamp)
      const Y = date.getFullYear() + '-'
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const D = date.getDate() + 1 < 10 ? '0' + date.getDate() : date.getDate() + ' '
      const h = date.getHours() + 1 < 10 ? '0' + date.getHours() : date.getHours() + ':'
      const m = date.getMinutes() + 1 < 10 ? '0' + date.getMinutes() : date.getMinutes() + ':'
      const s = date.getSeconds() + 1 < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return Y + M + D + h + m + s
    }
  }
}
</script>

<style scoped>
/*.avatar {*/
/*  width: 200px;*/
/*  height: 200px;*/
/*  border-radius: 50%;*/
/*}*/
</style>
